<template>
  <div class="home"> 
    <header>
        <div class="search-banner">
            <div class="logo">
                <img src="../assets/images/logo.png" alt="logo">
            </div>
            <div class="search">
                <input type="text" name="search" placeholder="搜索商品名称" @click="$router.push('/Search')">
            </div>
            <div class="login">
                <a href="#">
                    <img src="../assets/images/user.png" alt="登录" @click="$router.push('/usercenter')">
                </a>
            </div>
        </div>
        <nav>
            <ul>
                <li class="active">
                    <a href="#">推荐</a>
                </li>
                <li>
                    <a href="#">手机</a>
                </li>
                <li>
                    <a href="#">智能</a>
                </li>
                <li>
                    <a href="#">电视</a>
                </li>
                <li>
                    <a href="#">家电</a>
                </li>
                <li>
                    <a href="#">笔记本</a>
                </li>
                <li class="more">
                    <img src="../assets/images/arrow.png" alt="arrow">
                </li>
            </ul>
        </nav>
    </header>

    <!-- 主体内容开始 -->
    <main>
        <section class="focus">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="../assets//images/s1.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="../assets//images/s2.jpg" alt="">
                        </a>
                    </div>   
                </div>
                
                <div class="swiper-pagination"></div>
            </div>
        </section>
        <section class="menu">
           <ul>
               <li>
                    <a href="#">
                        <img src="../assets/images/menu1.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu2.png" alt="">
                    </a>
                </li>
               
                <li>
                    <a href="#">
                        <img src="../assets/images/menu3.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu4.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu5.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu6.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu7.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu8.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../assets/images/menu9.png" alt="">
                    </a>
                </li>
             
                <li>
                    <a href="#">
                        <img src="../assets/images/menu10.png" alt="">
                    </a>
                </li>
           </ul>
        </section>
        <section class="ad">
            <div class="left">
                <router-link 
                :to="{path:'/detail',
                query:{ //params
                        id:175,
                    }}">
                    <img src="../assets/images/ad1.webp" alt="">
                </router-link> 
            </div>
            <div class="right">
                <router-link 
                :to="{path:'/detail',
                query:{ //params
                        id:9,
                    }}">
                    <img src="../assets/images/ad2.webp" alt="">
                    </router-link>
                <router-link 
                :to="{path:'/detail',
                query:{ //params
                        id:26,
                    }}">
                    <img src="../assets/images/ad3.jpg" alt="">
                </router-link>
            </div>
        </section>
        <section class="hot">
            <router-link 
                :to="{path:'/detail',
                query:{ //params
                        id:176,
                    }}">
                <img src="../assets/images/ad4.webp" alt="">
            </router-link>
        </section>
        <section class="goods">
            <div v-for="item in list" :key="item.id">
                <router-link 
                :to="{path:'/detail',
                query:{ //params
                        id:item.id,
                    }}">
                    <img :src="item.url" alt="">
                    <p>{{item.title}}</p>
                    <p>{{item.desc}}</p>
                    <p>
                        &yen; <span>{{item.price}}</span> 起        
                    </p>
                    <button type="button">立即购买</button>
                </router-link>
            </div>
        </section>
    </main>
  </div>
</template>

<script>
 import axios from 'axios';
 import Swiper from "swiper";
 import 'swiper/css/swiper.css';
export default {
  name: 'HomeView',
    data() {
        return {
            list:[]
        }
    },
 methods:{
   goto(id){
      this.$router.push({name:'detail',params:{id:id}})
   },
   /* skip(){
       this.$router.push('/detail')
       this.$destroy();
   } */
 },
 mounted(){
   const swiper = new Swiper('.swiper-container', {
             speed:1000,// 动画切换速度
             loop: true, //是否循环
            autoplay:{  //自动切换
                delay:2000  // 幻灯片停留时间
            },
            pagination: {  //分页器-默认小圆点
                el: '.swiper-pagination',
            }
        })
        axios.get(`http://localhost:3000/xiaomi?type=手机`).then(
            response => {
                this.list = response.data.list
            },
            error => {
                console.log(error);
            }
        )
 }
}
</script>
<style src="../assets/css/index.css" scoped>

</style>